<template>
  <div>
    <a-row>
      <a-col :span="7">
        <div class="grid">
          <div id="grid-L1" class="grid-L1 grid-background"></div>
        </div>

        <div class="grid" style="margin-top: 10px;">
          <div id="grid-L3" class="grid-L3 grid-background"></div>
        </div>
      </a-col>
      <a-col :span="10">
        <div id="grid-M1" class="grid grid-M1">
          <div
            style="height: 45px;
    line-height: 45px;position: relative;z-index: 2;background-color:rgba(18, 37, 79, 0.45);;text-align: center;border-radius: 8px;color: #ffffff;font-size: 16px;font-weight: 600;left: 0;right: 0;margin: 0 auto;"
          >{{mapTitle}}</div>
          <div id="grid-MM" class="grid-MM">
            <TimeBar ref="timeBar"></TimeBar>
          </div>
        </div>
        <div class="w1200">
          <ul class="important cl">
            <li class="rcsp_1" style="margin-left: 60px;">
              <a @click="gotoClick('R1.html')">
                <span></span>
              </a>
              <p>污染源监测</p>
            </li>
            <li class="rcsp_2">
              <a @click="gotoClick('R2.html')">
                <span></span>
              </a>
              <p>大气质量监测</p>
            </li>
            <li class="rcsp_3">
              <a @click="gotoClick('R3.html')">
                <span></span>
              </a>
              <p>模型分析</p>
            </li>
            <li class="rcsp_4" style="
    margin-right: 30px;
">
              <a @click="gotoClick('manage')">
                <span></span>
              </a>
              <p>GIS管理平台</p>
            </li>
          </ul>
        </div>
      </a-col>
      <a-col :span="7">
        <div class="grid">
          <div class="grid-background">
            <div id="grid-R1" class="grid-R1"></div>
          </div>
        </div>
        <div class="grid" style="margin-top:10px">
          <div class="grid-background">
            <div id="grid-R2" class="grid-L2"></div>
          </div>
        </div>
        <div class="grid" style="margin-top:10px">
          <div id="grid-R3" class="grid-R3 grid-background" style="padding:5px"></div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
//import whgeoJson from '../../config/whGeoMap.json';
//import whzbJson from '../../config/wuzb.json';
import * as mapOper from '../../scripts/mapOper.js';
let config = require('../../config/config');
import commonOper from '../../scripts/commonOper';
var _ = require('lodash');
import TimeBar from './TimeBar.vue';
export default {
  name: 'Home',

  data() {
    return {
      mapTitle: '乌海30年热红外变化--遥感解译',
      gridL1: null,
      map: null,
      dataOption: {
        homeMap: null,
        dataList: []
      },
      barChartTwo: null,
      gaugeChart: null,
      R2Chart: null,
      R2ChartOption: {
        title: {
          text: '乌海30年矿区面积统计',

          x: 'center',
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          top: '25%',
          bottom: '10%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            height: 20,
            left: '10%',
            right: '10%',
            bottom: '2%',
            start: 50,
            end: 100,
            textStyle: {
              color: '#d4ffff',
              fontSize: 11
            }
          },
          {
            type: 'inside'
          }
        ],
        calculable: true,
        legend: {
          data: ['同比', '总面积'],
          top: '15%',
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          data: [],
          axisLine: {
            show: false //隐藏X轴轴线
          },
          axisTick: {
            show: false //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ebf8ac' //X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '总面积(K㎡)',
            nameTextStyle: {
              color: '#ebf8ac'
            },
            splitLine: {
              show: false
            },

            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              formatter: '{value}K㎡',
              textStyle: {
                color: '#ebf8ac'
              }
            }
          },
          {
            type: 'value',
            name: '同比增加(%)',
            nameTextStyle: {
              color: '#ebf8ac'
            },
            position: 'right',

            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              formatter: '{value} %', //右侧Y轴文字显示
              textStyle: {
                color: '#ebf8ac'
              }
            }
          },
          {
            type: 'value',
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
              }
            }
          }
        ],
        series: [
          {
            name: '同比',
            type: 'line',
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: '#058cff'
            },
            lineStyle: {
              color: '#058cff'
            },
            areaStyle: {
              color: 'rgba(5,140,255, 0.2)'
            },
            data: []
          },
          {
            name: '总面积',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#6f3d9e'
                  },
                  {
                    offset: 1,
                    color: '#3637a3'
                  }
                ])
              }
            },
            data: []
          }
        ]
      },
      L3Chart: null,
      L3ChartOption: {
        //backgroundColor: '#062D87',
        title: {
          text: '乌海30年热红外面积与矿区面积分析',
          x: 'center',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          x: 'center',
          y: '40px',
          data: ['矿区面积', '热红外面积'],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          // top: 'middle',
          left: '3%',
          right: '4%',
          //bottom: '3%',
          // height: '80%',
          containLabel: true
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            height: 20,
            left: '10%',
            right: '10%',
            bottom: '2%',
            start: 50,
            end: 100,
            textStyle: {
              color: '#d4ffff',
              fontSize: 11
            }
          },
          {
            type: 'inside'
          }
        ],
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisTick: {
              show: true //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ebf8ac' //X轴文字颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'K㎡',
            nameTextStyle: {
              color: '#ebf8ac'
            },
            axisLabel: {
              formatter: '{value}K㎡',
              textStyle: {
                color: '#ebf8ac'
              }
            },
            // axisLabel: {
            //   show: true,
            //   textStyle: {
            //     color: '#ebf8ac'
            //   }
            // },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#DDD'
              }
            }
          }
        ],
        series: [
          {
            name: '矿区面积',
            type: 'line',
            data: [],
            // markPoint : {
            //   data : [
            //     {name : '周最低', value : 22, xAxis: 1, yAxis: 22}
            //   ]
            // },
            lineStyle: {
              normal: {
                width: 3,
                color: {
                  type: 'linear',

                  colorStops: [
                    {
                      offset: 0,
                      color: '#F6D06F' // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: '#F9A589' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#F9A589' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: 'rgba(249,165,137, 0.5)',
                shadowBlur: 5,
                shadowOffsetY: 3
              }
            },
            itemStyle: {
              normal: {
                color: '#F6D06F',
                borderWidth: 5,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                     shadowBlur: 100,*/
                borderColor: '#F6D06F'
              }
            },
            smooth: true,
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          },
          {
            name: '热红外面积',
            type: 'line',
            // min: 10,
            // max: 40,
            data: [],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            lineStyle: {
              normal: {
                width: 3,
                color: {
                  type: 'linear',

                  colorStops: [
                    {
                      offset: 0,
                      color: '#AAF487' // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: '#47D8BE' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#47D8BE' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: 'rgba(71,216,190, 0.5)',
                shadowBlur: 5,
                shadowOffsetY: 3
              }
            },
            itemStyle: {
              normal: {
                color: '#AAF487',
                borderWidth: 5,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                     shadowBlur: 100,*/
                borderColor: '#AAF487'
              }
            },
            smooth: true,
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          }
        ]
      },

      dayHight: '0',
      dayLow: '0',
      yearHight: '0',
      yearLow: '0',
      dayHour1: '12时',
      dayHour2: '12时',
      yearTime1: '2月20日',
      yearTime2: '2月20日',
      R3Chart: null,
      gridL1Option: {
        //backgroundColor: '#0A1651',
        title: {
          text: '大气排放与空气污染相关性分析',
          x: 'center',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          // icon: 'diamond',
          itemGap: 13,
          data: ['优良时排放量', '轻度污染时排放量', '重污染时排放量'],
          x: 'center',
          y: '40px',
          textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
          }
        },
        grid: {
          bottom: '10%'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30',
              '31'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },

            axisLabel: {
              margin: 10,
              textStyle: {
                color: 'rgba(255,255,255)',
                fontSize: '12'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            }
          }
        ],
        // visualMap: [{
        //     show: false,
        //     pieces: [
        //         {
        //             gt: 0,
        //             lt: 30,
        //             color: '#FFFF00',
        //         },
        //         {
        //             gt: 30,
        //             lt: 54,
        //             color: '#00A1EA',
        //         }
        //     ],
        //     outOfRange: {
        //         color: '#FF5D1D',
        //     },
        // }, ],
        series: [
          {
            name: '优良时排放量',
            type: 'line',
            smooth: true,
            markLine: {
              //最大值和最小值
              data: [
                {
                  name: '阈值54',
                  yAxis: 54,
                  label: {
                    show: 'true',
                    position: 'end',
                    formatter: '增加量阈值54'
                  },
                  lineStyle: {
                    normal: {
                      width: 2,
                      color: '#FF5D1D'
                    }
                  }
                }
              ]
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            symbol: 'circle',
            symbolSize: 4,
            itemStyle: {
              normal: {
                color: 'green'
                // borderColor: 'blue', //拐点边框颜色
              }
            },
            data: [
              50,
              52,
              52,
              52,
              52,
              58,
              52,
              55,
              48,
              52,
              52,
              52,
              54,
              52,
              52,
              52,
              50,
              52,
              52,
              52,
              52,
              52,
              55,
              52,
              52,
              49,
              52,
              52,
              52,
              52,
              52
            ]
          },
          {
            name: '轻度污染时排放量',
            type: 'line',
            smooth: true,
            markLine: {
              //最大值和最小值
              data: [
                {
                  name: '阈值30',
                  yAxis: 30,
                  label: {
                    show: 'true',
                    position: 'end',
                    formatter: '减少量阈值30'
                  },
                  lineStyle: {
                    normal: {
                      width: 2,
                      color: '#FF5D1D'
                    }
                  }
                }
              ]
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            symbol: 'circle',
            symbolSize: 4,
            itemStyle: {
              normal: {
                color: '#00A1EA'
                // borderColor: 'blue', //拐点边框颜色
              }
            },
            data: [
              30,
              32,
              32,
              32,
              32,
              38,
              32,
              33,
              36,
              32,
              32,
              32,
              34,
              32,
              32,
              32,
              39,
              32,
              32,
              32,
              32,
              32,
              33,
              32,
              32,
              23,
              32,
              32,
              32,
              32,
              32
            ]
          },
          {
            name: '重污染时排放量',
            type: 'line',
            smooth: true,
            markLine: {
              //最大值和最小值
              data: [
                {
                  name: '阈值10',
                  yAxis: 10,
                  label: {
                    show: 'true',
                    position: 'end',
                    formatter: '变化量阈值10'
                  },
                  lineStyle: {
                    normal: {
                      width: 2,
                      color: '#FF5D1D'
                    }
                  }
                }
              ]
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            symbol: 'circle',
            symbolSize: 4,
            itemStyle: {
              normal: {
                color: 'yellow'
                // borderColor: 'blue', //拐点边框颜色
              }
            },
            data: [
              10,
              11,
              12,
              13,
              11,
              9,
              11,
              12,
              13,
              11,
              9,
              8,
              10,
              12,
              13,
              11,
              9,
              8,
              10,
              12,
              10,
              13,
              11,
              9,
              11,
              12,
              13,
              11,
              9,
              8,
              10,
              12,
              13,
              11,
              9,
              8,
              10,
              12,
              10
            ]
          }
        ]
      },
      R3ChartOption: {
        timeline: {
          data: [],
          axisType: 'category',
          autoPlay: true,
          playInterval: 3000,
          left: '10%',
          right: '10%',
          bottom: '3%',
          width: '80%',
          //  height: null,
          label: {
            normal: {
              textStyle: {
                color: '#ddd'
              }
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          symbolSize: 10,
          lineStyle: {
            color: '#555'
          },
          checkpointStyle: {
            borderColor: '#777',
            borderWidth: 2
          },
          controlStyle: {
            showNextBtn: true,
            showPrevBtn: true,
            normal: {
              color: '#666',
              borderColor: '#666'
            },
            emphasis: {
              color: '#aaa',
              borderColor: '#aaa'
            }
          }
        },
        baseOption: {
          animation: true,
          animationDuration: 1000,
          animationEasing: 'cubicInOut',
          animationDurationUpdate: 1000,
          animationEasingUpdate: 'cubicInOut',
          grid: {
            right: '1%',
            top: '15%',
            bottom: '10%',
            width: '20%'
          }
        },
        options: []
      },
      gaugeChartOptions: {
        title: [
          {
            x: '24%',
            bottom: 10,
            text: '实时AQI',
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          },
          {
            x: '38%',
            bottom: 1,
            text: '',
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          {
            x: '68%',
            bottom: 10,
            text: '今日AQI',
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          }
        ],
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'gauge',
            center: ['75%', '55%'], // 默认全局居中
            radius: '70%',
            min: 0,
            max: 350,
            startAngle: 200,
            endAngle: -20,
            clockwise: true,
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                shadowBlur: 0,
                color: [[1, '#03B7C9']]
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#03B7C9',
                width: 1
              },
              length: -6,
              splitNumber: 5
            },
            splitLine: {
              show: true,
              length: -10,
              lineStyle: {
                color: '#03B7C9'
              }
            },
            axisLabel: {
              distance: -20,
              textStyle: {
                color: '#03B7C9',
                fontSize: '10',
                fontWeight: 'bold'
              }
            },
            pointer: {
              //仪表盘指针
              show: 0
            },
            detail: {
              show: false
            },
            data: [
              {
                name: '',
                value: 50
              }
            ]
          },
          {
            startAngle: 200,
            endAngle: -20,
            type: 'gauge',
            center: ['75%', '55%'], // 默认全局居中
            radius: '65%',
            min: 0,
            max: 350,
            splitNumber: 0,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                color: [
                  [0.66, '#dddddd'],
                  [1, '#dddddd']
                ], // 属性lineStyle控制线条样式
                width: 3
              }
            },
            axisLabel: {
              // 坐标轴小标记
              textStyle: {
                // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                fontSize: 16,
                color: 'rgba(30,144,255,0)'
              }
            },
            splitLine: {
              // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 0,
                color: '#444'
              }
            },
            pointer: {
              // 分隔线 指针
              color: '#666666',
              width: 0,
              length: 230
            },
            detail: {
              show: false
            }
          },
          {
            name: '今日AQI',
            type: 'gauge',
            startAngle: 200,
            endAngle: -20,
            radius: '60%',
            center: ['75%', '55%'], // 默认全局居中
            min: 0,
            max: 350,
            axisLine: {
              show: false,
              lineStyle: {
                width: 12,
                shadowBlur: 0,
                color: [
                  [0.14, '#096'],
                  [0.28, '#ffde33'],
                  [0.42, '#ff9933'],
                  [0.57, '#cc0033'],
                  [0.85, '#660099'],
                  [1, '#7e0023']
                ]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              length: 20
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: true,
              width: 4
            },
            detail: {
              show: true,
              offsetCenter: [0, '60%'],
              textStyle: {
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                color: '#03B7C9'
              }
            },
            data: [
              {
                value: 0
              }
            ]
          },
          {
            type: 'gauge',
            center: ['30%', '55%'], // 默认全局居中
            radius: '70%',
            min: 0,
            max: 350,
            startAngle: 200,
            endAngle: -20,
            clockwise: true,
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                shadowBlur: 0,
                color: [[1, '#03B7C9']]
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#03B7C9',
                width: 1
              },
              length: -6,
              splitNumber: 5
            },
            splitLine: {
              show: true,
              length: -10,
              lineStyle: {
                color: '#03B7C9'
              }
            },
            axisLabel: {
              distance: -20,
              textStyle: {
                color: '#03B7C9',
                fontSize: '10',
                fontWeight: 'bold'
              }
            },
            pointer: {
              //仪表盘指针
              show: 0
            },
            detail: {
              show: false
            },
            data: [
              {
                name: '',
                value: 350
              }
            ]
          },
          {
            startAngle: 200,
            endAngle: -20,
            type: 'gauge',
            center: ['30%', '55%'], // 默认全局居中
            radius: '65%',
            min: 0,
            max: 350,
            splitNumber: 0,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                color: [
                  [0.66, '#dddddd'],
                  [1, '#dddddd']
                ], // 属性lineStyle控制线条样式
                width: 3
              }
            },
            axisLabel: {
              // 坐标轴小标记
              textStyle: {
                // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                fontSize: 16,
                color: 'rgba(30,144,255,0)'
              }
            },
            splitLine: {
              // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 0,
                color: '#444'
              }
            },
            pointer: {
              // 分隔线 指针
              color: '#666666',
              width: 0,
              length: 230
            },
            detail: {
              show: false
            }
          },
          {
            name: '实时AQI',
            type: 'gauge',
            startAngle: 200,
            endAngle: -20,
            radius: '60%',
            center: ['30%', '55%'], // 默认全局居中
            min: 0,
            max: 350,

            axisLine: {
              show: false,
              lineStyle: {
                width: 12,
                shadowBlur: 0,
                color: [
                  [0.14, '#096'],
                  [0.28, '#ffde33'],
                  [0.42, '#ff9933'],
                  [0.57, '#cc0033'],
                  [0.85, '#660099'],
                  [1, '#7e0023']
                ]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              length: 20
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: true,
              width: 4
            },
            detail: {
              show: true,
              offsetCenter: [0, '60%'],
              textStyle: {
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                color: '#03B7C9'
              }
            },
            data: [
              {
                value: 0
              }
            ]
          }
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initL1Charts();
      this.initGaugeChart();
      this.initL3Charts();
      this.initR3Charts();
      this.initR2Charts();
      //this.initMap();
      this.getR1ChartData();
      this.getL3ChartData();
      this.getR3ChartData();
    });
  },
  methods: {
    gotoClick(item) {
      if (item == 'manage') {
        window.location.href = config.HOME_URL;
      } else {
        this.$router.push(item);
      }
    },

    getR1ChartData() {
      let that = this;

      let param = {
        this: that,
        url: 'http://106.74.0.132:4000/api/map/2?type=hour',
        data: {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        },
        successFunc: response => {
          if (response.status === 200 && response.data) {
            let wuhaiaqi = [1];
            let timestamp = '';
            _.forEach(response.data, function(value) {
              if (
                value.name == '中海勃湾学校' ||
                value.name == '市林业局' ||
                value.name == '聚英学校'
              ) {
                wuhaiaqi.push(value.aqi);
                timestamp = value.timestamp;
              }
            });
            let maxAqi = _.max(wuhaiaqi);
            let avgAqi = _.floor(_.mean(wuhaiaqi));
            that.gaugeChartOptions.title[1].text = timestamp;
            //今日
            that.gaugeChartOptions.series[2].data[0].value = avgAqi;
            //小时
            that.gaugeChartOptions.series[5].data[0].value = maxAqi;

            that.gaugeChart.setOption(that.gaugeChartOptions);
            window.onresize = that.gaugeChart;
            that.dayHight = maxAqi;
            that.dayLow = avgAqi;
            var Time = new Date(timestamp);
            that.dayHour2 = Time.getHours() + '时';
            that.dayHour1 = Time.getHours() + '时';
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };

      commonOper.HttpGet(param);
    },

    getL3ChartData() {
      let params = {
        this: this,
        url: config.webapiUrl + '/minechange/getAreaGroupByYear',
        successFunc: response => {
          let that = this;

          // //过滤矿区信息
          let tempyear = [];
          let arrealst = [];
          _.forEach(response.data.data, function(value) {
            tempyear.push(value.jyyear);
            arrealst.push(_.round(value.area / 1000000, 4));
          });
          let areaAllList = [];
          let preList = [];
          for (var i = 0; i < arrealst.length; i++) {
            let sums = 0;
            for (var j = 0; j <= i; j++) {
              sums += arrealst[j];
            }
            areaAllList.push(Number(sums.toFixed(2)));
          }
          preList.push(0);
          for (var k = 1; k < areaAllList.length; k++) {
            let fz = areaAllList[k] - areaAllList[k - 1];
            let pre = (fz / areaAllList[k]) * 100;
            preList.push(Number(pre.toFixed(2)));
          }
          that.L3ChartOption.xAxis[0].data = tempyear;
          that.L3ChartOption.series[0].data = areaAllList;
          that.L3ChartOption.series[1].data = arrealst;
          that.L3Chart.setOption(that.L3ChartOption);
          window.onresize = that.L3Chart;

          that.R2ChartOption.xAxis.data = tempyear;
          that.R2ChartOption.series[0].data = preList;
          that.R2ChartOption.series[1].data = areaAllList;
          that.R2Chart.setOption(that.R2ChartOption);
          window.onresize = that.R2Chart;
        }
      };
      commonOper.HttpGet(params);
    },
    initMap() {
      this.map = mapOper.initBlankMap('grid-MM');
      //清空图层
      if (this.map) {
        this.map = mapOper.removeAllLayers(this.map);
      }

      // this.dataOption = {
      //   homeMap: this.map,
      //   dataList: [
      //     {
      //       time: '01月01日00时',
      //       data: []
      //     },
      //     { time: '01月01日01时', data: [] },
      //     { time: '01月01日02时', data: [] },
      //     { time: '01月01日03时', data: [] },
      //     { time: '01月01日04时', data: [] },
      //     { time: '01月01日05时', data: [] }
      //   ]
      // };

      let data = new FormData();
      data.append('zhibiao', 'pm25');
      data.append('startTime', '2019-10-31 21:00:00');

      //下载数据
      let params = {
        this: this,
        url: config.webapiUrl + '/modelresult/getModelResultLayer',
        data: data,
        successFunc: response => {
          console.log(response.data.data);
          this.$refs.timeBar.init(this.map, response.data.data);
        },
        failFunc: response => {
          let params = {
            this: this,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };
      commonOper.HttpPost(params);
      //动态添加图层
    },
    showPM25Layer() {},
    initR2Charts() {
      let chartDiv = document.getElementById('grid-R2');
      this.R2Chart = this.$echarts.init(chartDiv);
      this.R2Chart.setOption(this.R2ChartOption);
      window.onresize = this.R2Chart;
    },
    initR3Charts() {
      let chartDiv = document.getElementById('grid-R3');
      this.R3Chart = this.$echarts.init(chartDiv);
      this.R3Chart.setOption(this.R3ChartOption);
      window.onresize = this.R3Chart;
    },
    initL3Charts() {
      let chartDiv = document.getElementById('grid-L3');
      this.L3Chart = this.$echarts.init(chartDiv);

      this.L3Chart.setOption(this.L3ChartOption);
      window.onresize = this.L3Chart;
    },
    //仪表盘
    initGaugeChart() {
      let chartDiv = document.getElementById('grid-R1');
      this.gaugeChart = this.$echarts.init(chartDiv);
      this.gaugeChart.setOption(this.gaugeChartOptions);
      window.onresize = this.gaugeChart;
    },
    initL1Charts() {
      this.gridL1 = this.$echarts.init(document.getElementById('grid-L1'));

      this.gridL1.setOption(this.gridL1Option);
      window.onresize = this.gridL1;
    },
    getR3ChartData() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month = (date.getMonth() + 1).toString();
      let day = date.getDate().toString();
      let that = this;
      let data = new FormData();
      data.append('cityName', '乌海市');
      data.append('startTime', '2010-01-01');
      data.append('endTime', year + '-' + month + '-' + day);
      data.append('dataType', 'day');
      let param = {
        this: that,
        url: config.webapiUrl + '/airQually/getHistoryAqiData',
        data: data,
        successFunc: response => {
          if (response.status === 200 && response.data.data) {
            that.resetR3Options(response.data.data);
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };
      commonOper.HttpPost(param);
    },
    resetR3Options(aqiData) {
      let that = this;
      let yeardata = [];
      let allyears = [];
      _.forEach(aqiData, function(value) {
        var unixTimestamp = new Date(value.timestamp);
        var syear = unixTimestamp.getFullYear();
        allyears.push(syear);

        yeardata.push({
          year: syear + '',
          primarypollutant: value.primarypollutant
        });
      });

      let yeararr = _.sortBy(_.uniq(allyears));
      let groupbyyear = _.groupBy(yeardata, function(o) {
        return o.year;
      });
      var voltageLevel = [];
      for (var i = 0; i < yeararr.length; i++) {
        voltageLevel.push(yeararr[i] + '年');
        //当前年的数据
        let currentdata = groupbyyear[yeararr[i]];
        //数据按主要污染物分组
        let groupbypull = _.groupBy(currentdata, function(o) {
          return o.primarypollutant;
        });

        let propArr = [];
        //用javascript的for/in循环遍历对象的属性
        for (var pro in groupbypull) {
          if (pro != '—') {
            propArr.push(pro);
          }
        }
        //Echarts数据
        let seriesData = [];
        //遍历每一项属性
        _.forEach(propArr, function(o) {
          let attrdata = groupbypull[o];
          let prevalue = 0;
          if (currentdata.length > 0) {
            prevalue = (attrdata.length / currentdata.length) * 100;
          }
          seriesData.push({ name: o, value: prevalue.toFixed(2) });
        });
        that.R3ChartOption.options.push({
          title: [
            {
              text: '乌海市' + yeararr[i] + '年主要污染物占比',
              left: 'center',
              textStyle: {
                color: '#fff'
              }
            }
          ],
          series: [
            {
              name: '交易额',
              type: 'pie',
              radius: ['36%', '58%'],
              center: ['50%', '49%'],
              label: {
                normal: {
                  show: true,
                  formatter: '{b} {c}%',
                  textStyle: {
                    fontSize: 14
                  },
                  position: 'outside'
                },
                emphasis: {
                  show: true
                }
              },
              labelLine: {
                normal: {
                  show: true,
                  length: 10,
                  length2: 25
                },
                emphasis: {
                  show: true
                }
              },
              color: [
                '#FF5D1D',
                '#00A1EA',
                '#03B7C9',
                '#c641f6',
                '#5ef5d4',
                '#00bcea'
              ],
              data: seriesData
            }
          ]
        });
      }
      that.R3ChartOption.timeline.data = voltageLevel;
      that.R3Chart.setOption(that.R3ChartOption);
    }
  },
  components: {
    TimeBar
  }
};
</script>

<style>
.w1200 {
  width: 790px;
  margin: 0 auto;
  margin-top: 30px;
}
.w1200 .important .rcsp_1:hover span,
.w1200 .important .rcsp_2:hover span,
.w1200 .important .rcsp_3:hover span,
.w1200 .important .rcsp_4:hover span {
  transition: background 0.3s;
  -moz-transition: background 0.3s;
  -ms-transition: background 0.3s;
  -webkit-transition: background 0.3s;
  -o-transition: background 0.3s;
}
.w1200 .important .rcsp_1:hover span {
  background: url("../../assets/images/m01.png") no-repeat top center;
}
.w1200 .important .rcsp_2:hover span {
  background: url("../../assets/images/m02.png") no-repeat top center;
}
.w1200 .important .rcsp_3:hover span {
  background: url("../../assets/images/m03.png") no-repeat top center;
}
.w1200 .important .rcsp_4 span:hover {
  background: url("../../assets/images/m04.png") no-repeat top center;
}
.important {
  padding: 20px 0 0px 0;
}
.important li {
  float: left;
  margin-right: 90px;
  height: 150px;
}
li {
  list-style: none;
}
.important li a {
  /**display: block;
  width: 120px;
  padding: 21px;
  
  
  border: 1px dotted #1dd2af;
  background: #fff;
  height: 120px;**/
  display: block;
  border-radius: 15px;
}
.important li:hover a {
  border: 1px dotted #696969;
  background: #fff;
}
.important li span {
  width: 100px;
  height: 100px;
  display: block;
}
.important .rcsp_1 span {
  background: url("../../assets/images/m01.png") no-repeat bottom center;
}
.important .rcsp_2 span {
  background: url("../../assets/images/m02.png") no-repeat bottom center;
}
.important .rcsp_3 span {
  background: url("../../assets/images/m03.png") no-repeat bottom center;
}
.important .rcsp_4 span {
  background: url("../../assets/images/m04.png") no-repeat bottom center;
}
.w1200 .important .rcsp_1:hover span,
.w1200 .important .rcsp_2:hover span,
.w1200 .important .rcsp_3:hover span,
.w1200 .important .rcsp_4:hover span,
.w1200 .important .rcsp_5:hover span,
.w1200 .important .rcsp_6:hover span,
.w1200 .important .rcsp_7:hover span,
.w1200 .important .rcsp_8:hover span,
.w1200 .important .rcsp_9:hover span {
  transition: background 0.3s;
  -moz-transition: background 0.3s;
  -ms-transition: background 0.3s;
  -webkit-transition: background 0.3s;
  -o-transition: background 0.3s;
}
.w1200 .important .rcsp_1:hover span {
  background: url("../../assets/images/m01.png") no-repeat top center;
}
.w1200 .important .rcsp_2:hover span {
  background: url("../../assets/images/m02.png") no-repeat top center;
}
.w1200 .important .rcsp_3:hover span {
  background: url("../../assets/images/m03.png") no-repeat top center;
}
.w1200 .important .rcsp_4 span:hover {
  background: url("../../assets/images/m04.png") no-repeat top center;
}

.important li p {
  line-height: 18px;
  margin-top: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  display: block;
  color: #f2f5f4;
}
.important li:hover p {
  color: #06b7fa;
}
.grid-L1 {
  height: 460px;
  padding-top: 10px;
}
.grid-L2 {
  height: 314px;
}
.grid-L3 {
  height: 420px;
}
.grid-M2 {
  height: 170px;
}
.grid-MM {
  height: 627px;
  background: url("../../assets/images/hot.gif") no-repeat center;
  background-size: contain;
  background-color: #000001;
}
.grid-R1 {
  height: 180px;
  padding-top: 10px;
}
.grid-R1-Title {
  font-size: 14px;
  color: #d9d9d9;
  font-weight: 600;
  text-align: center;
}
.grid-R1-Content {
  font-size: 12px;
  color: #d9d9d9;
  padding: 10px;

  text-align: center;
}
.grid-R2 {
  height: 340px;
  width: 100%;
}
.grid-R3 {
  height: 370px;
}
.grid-L2-Title {
  min-height: 48px;
  font-size: 20px;
  color: rgb(255, 255, 255);
  font-weight: 600;
  line-height: 48px;
  text-align: center;
}
.grid-L2-Content {
  padding-left: 25px;
  padding-top: 15px;
  padding-bottom: 10px;
  font-size: 12px;
  color: #d9d9d9;
  line-height: 12px;
  text-align: center;
}
.grid-L2-Span-Up {
  color: #ff0000;
  font-size: 16px;
  font-weight: 600;
  padding: 6px;
}
.R2-left {
  float: left;
  width: 49%;
  border: 1px solid #f00;
}
.R2-right {
  float: left;
  width: 49%;
  border: 1px solid #000;
}
.ant-col-6 {
  padding: 10px;
}
.ant-col-7 {
  padding: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.ant-col-8 {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.ant-col-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.ant-col-24 {
  padding-left: 10px;
  padding-right: 10px;
}
.counter {
  margin-top: 15px;
  text-align: center;
  position: relative;
}
.counter .counter-content {
  width: 60px;
  height: 60px;
  border-radius: 40%;
  background: #fff;
  padding: 10px 0;
  margin: 0 auto 10px;
  z-index: 1;
  position: relative;
  transition: all 0.3s ease 0s;
}
.counter .counter-content:before {
  content: "";
  width: 122%;
  height: 122%;
  border-radius: 50%;
  border: 10px solid #08a9ed;
  border-bottom: 10px solid transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.counter .counter-content:after {
  content: "";
  border-top: 16px solid #08a9ed;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
}
.counter .counter-icon {
  display: block;
  font-size: 50px;
  color: #08a9ed;
  line-height: 50px;
}
.counter .counter-value {
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  line-height: 40px;
}
.counter .title {
  display: inline-block;
  padding: 5px 15px;
  background: #08a9ed;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  text-transform: capitalize;
  margin: 0;
}
.counter.red .counter-content:before {
  border-color: #ef5f61;
  border-bottom-color: transparent;
}
.counter.red .counter-content:after {
  border-top-color: #ef5f61;
}
.counter.red .counter-icon {
  color: #ef5f61;
}
.counter.red .title {
  background: #ef5f61;
}
.counter.blue .counter-content:before {
  border-color: #4d9fcf;
  border-bottom-color: transparent;
}
.counter.blue .counter-content:after {
  border-top-color: #4d9fcf;
}
.counter.blue .counter-icon {
  color: #4d9fcf;
}
.counter.blue .title {
  background: #4d9fcf;
}
.counter.purple .counter-content:before {
  border-color: #a7bf46;
  border-bottom-color: transparent;
}
.counter.purple .counter-content:after {
  border-top-color: #a7bf46;
}
.counter.purple .counter-icon {
  color: #a7bf46;
}
.counter.purple .title {
  background: #a7bf46;
}
</style>


